<template>
  <div>
    <el-table
        :data="pageTicket"
        stripe
        style="width: 100%"
        max-height="250"
    >
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="note"
          label="简介">
      </el-table-column>
      <el-table-column
          prop="fanNum"
          :sortable="sortable"
          label="粉丝数量">
      </el-table-column>
      <el-table-column
          prop="articleNum"
          :sortable="sortable"
          label="文章数量">
      </el-table-column>
      <el-table-column
          prop="createTime"
          :sortable="sortable"
          label="创建日期"
          width="180"
          :formatter="formatter">
      </el-table-column>
      <el-table-column
          prop="forbid"
          label="当前状态"
          width="100"
          :filters="[{ text: '正常', value: 0 }, { text: '禁止使用', value: 1 }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.forbid === 0 ? 'success' : 'danger'"
              disable-transitions>{{+scope.row.forbid === 0 ? '正常' : '禁止使用'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              :type="scope.row.forbid === 0 ? 'danger' : 'success'"
              @click="handle(scope.$index, scope.row)">{{scope.row.forbid === 0 ? '禁止使用' : '允许使用'}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentpage"
        :page-sizes="[5,10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import moment from "moment/moment";
export default {
  name: 'User',
  data () {
    return {
      user: "User",
      tableData:[],
      sortable:true,

      total:0,  //总数据条数
      currentpage:1,  //当前所在页默认是第一页
      pagesize:5,  //每页显示多少行数据 默认设置为10
      pageTicket:[],//分页后的当前页数据

    }
  },
  mounted() {
    this.getUserData()

  },
  methods:{
    // 获取当前页的数据信息
    getPageInfo(){
      //清空pageTicket中的数据
      this.pageTicket=[];
      // 获取当前页的数据
      for(let i=(this.currentpage-1)*this.pagesize;i<this.total;i++){
        //把遍历的数据添加到pageTicket里面
        this.pageTicket.push(this.tableData[i]);
        //判断是否达到一页的要求
        if(this.pageTicket.length===this.pagesize) break;
      }
      console.log("pageTicket "+this.pageTicket)
    },
    //分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size){
      //修改当前每页的数据行数
      this.pagesize=size;
      //数据重新分页
      this.getPageInfo();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber){
      //修改当前的页码
      this.currentpage=pageNumber;
      //数据重新分页
      this.getPageInfo()
    },
    handle(index, row) {
      console.log("row "+JSON.stringify(row));
      if(row.forbid === 0){
        this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/forbidAclUser/'+row.id,{

        },{
          headers:{
            'token': localStorage.getItem('token')
          },
        }).then((res)=>{
          console.log(res.data)
          this.getUserData()
        });
      }else{
        this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/allowAclUser/'+row.id,{

        },{
          headers:{
            'token': localStorage.getItem('token')
          },
        }).then((res)=>{
          console.log(res.data)
          this.getUserData()
        });
      }
    },
    filterTag(value, row) {
      return row.forbid === value;
    },
    formattedDate(date) {
      return moment(date).format('YYYY-MM-DD'); // 使用 Moment.js 格式化日期
    },
    formatter(row,column){
      return this.formattedDate(row.createTime)
    },
    getUserData(){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getAclUserData',{

      },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        // console.log("自媒体用户列表 "+JSON.stringify(res.data))
        this.tableData = res.data.data
        this.total = this.tableData.length
        this.getPageInfo()
      });
    }
  }
}
</script>

<style scoped>

</style>